<template>
  <div>
    <div>
      <ul class="lz">

        <li v-for="(item,index) of list" :key="index">
          <div class="lz_left">
            <img :src="IP+item.thumb" alt />
          </div>
          <div class="lz_right">
            <p class="title1">{{item.title}}</p>
            <p class="place">{{item.keywords}}</p>
            <p class="time">{{item.description}}</p>
            <!-- <span class="content1"> 我们的家乡，舟山，这座美丽可爱的千岛之城，却拥有着一道难以消逝的历史伤痛。
            180年前，面对着用坚船利炮叩门而来的英国侵略者，舟山军民为保卫家园谱写了一曲壮烈的海山悲歌。义无反顾的牺牲连敌人也为之折服，却没有换来最终的胜利。历史给了舟山最深刻的教训，时刻提醒着我们不可再重蹈当年的覆辙。</span>-->
          </div>
        </li>
      </ul>
      <div>
        <p @click="lan(page)" v-show="hide">111</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      choose: "",
      page: 1, // 页码
      pageSize: 3, // 每页多少条
      fistrPage: true, // 是否第一页
      lastPage: false, // 是否最后一页
      totalPage: "", // 总页数
      totalRow: "", // 总条数
    
      hide: true,
      cur2: 0 // 当前页码
    };
  },
created() {
    this.get();
  },
  components: {},

  methods: {
    get() {
      this.$api
        .get(
          `http://api.museum24h.com/myidea10/api/list/dangqianzhanlan-${this.page}-${this.pageSize}`
        )
        .then(res => {
          // console.log(res)
         
          this.totalPage =res.data.page.totalPage;
          this.totalRow = res.data.page.totalRow;
          this.cur = res.data.page.pageNumber;
         let data=res.data.page.list
          this.list=[...this.list,...data]//里面的list是打散 ，第一次是空数组，拼接第data里面的第一次，打散之后拼接，

        
          console.log(this.list)

        });
    },
    lan(i) {
      //页码点击事件

      this.page += 1;
      if (this.page == this.totalPage) {
        this.hide = false;
      }

      this.get();
      
    }
  }
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
}
.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  background: rgb(225, 225, 225);
  justify-content: space-between;
  margin-bottom: 30px;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;
  padding-left: 30px;
}
.title1 {
  color: rgb(46, 83, 90);
  font-size: 24px;
  margin-bottom: 10px;
}
.place,
.time {
  font-size: 14px;
  margin-bottom: 10px;
}
.content1 {
  font-size: 12px;
  line-height: 0px;
}
</style>